<template>
  <div>
    <h1>关系:{{title[0]}}</h1>

    <el-form :inline="true" :model="relative" class="demo-form-inline">
      <el-form-item label="选择表">
        <el-select @change="handleSelectedTableChange" v-model="relative.table1" placeholder="表:关系一">
          <el-option v-for="(item, index) in selectTables" :key="index" :label="item.realTableName" :value="item.realTableName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择属性">
        <el-select v-model="selectedProperty.table1" placeholder="请选择">
          <el-option v-for="(item, index) in selectedTable.table1.rows" :key="index" :label="`${item.name}(${item.desc})`" :value="item.name"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <h1>关系:{{title[1]}}</h1>
    <el-form :inline="true" :model="relative" class="form-one-one">
      <el-form-item label="选择表">
        <el-select :disabled="true" v-model="relative.table2" placeholder="表:关系一">
          <el-option v-for="(item, index) in selectTables" :key="index" :label="item.realTableName" :value="item.realTableName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择属性">
        <el-select v-model="selectedProperty.table2" placeholder="请选择">
          <el-option v-for="(item, index) in selectedTable.table2.rows" :key="index" :label="`${item.name}(${item.desc})`" :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAddRelative">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'RelativeForm',
  props: ['title', 'selectTables', 'selectedTable'],
  data () {
    return {
      relative: {
        table1: null,
        table2: null,
        selectedProperty: {
          table1: null,
          table2: null
        }
      }
    }
  },
  methods: {
    handleAddRelative () {
      this.$emit('handleAddRelative')
    },
    handleSelectedTableChange () {
      console.log(this.selectTables)
      if (this.relative.table1 === this.selectTables[0].realTableName) {
        this.selectedTable.table1 = this.selectTables[0]
        this.selectedTable.table2 = this.selectTables[1]
        this.relative.table2 = this.selectTables[1].realTableName
      } else {
        this.relative.table2 = this.selectTables[0].realTableName
        this.selectedTable.table1 = this.selectTables[1]
        this.selectedTable.table2 = this.selectTables[0]
      }
      console.log(this.selectedTable.table1)
    }
  }
}
</script>

<style scoped>

</style>
